<template>
  <div class="form-field" :class="{ 'has-error': showError, 'is-mobile': isMobile }">
    <label v-if="label" class="form-label">
      <span>{{ label }}</span>
      <span v-if="required" class="required-mark">*</span>
    </label>
    <div class="input-wrapper">
      <input
        :type="inputType"
        :value="modelValue"
        :placeholder="placeholder"
        :disabled="disabled"
        :readonly="readonly"
        :maxlength="maxlength"
        class="form-input"
        @input="onInput"
        @blur="onBlur"
        @focus="onFocus"
      />
      <div v-if="clearable && modelValue" class="clear-btn" @click="onClear">
        <i class="fas fa-times"></i>
      </div>
      <div v-if="$slots.suffix" class="input-suffix">
        <slot name="suffix"></slot>
      </div>
    </div>
    <div v-if="showError" class="error-message">{{ error }}</div>
    <div v-if="hint && !showError" class="hint-message">{{ hint }}</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'BaseInput',
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
    maxlength: {
      type: Number,
      default: null
    },
    hint: {
      type: String,
      default: ''
    },
    error: {
      type: String,
      default: ''
    },
    validateOnBlur: {
      type: Boolean,
      default: true
    },
    autoCorrect: {
      type: Boolean,
      default: false
    },
    autoCapitalize: {
      type: String,
      default: 'off'
    },
    autoComplete: {
      type: String,
      default: 'off'
    }
  },
  emits: ['update:modelValue', 'blur', 'clear', 'input', 'focus'],
  data() {
    return {
      isFocused: false
    }
  },
  computed: {
    ...mapState('app', ['device']),
    isMobile() {
      return this.device === 'mobile'
    },
    showError() {
      return !!this.error
    },
    // 根据类型智能优化移动端键盘
    inputType() {
      // 移动端数字类型优化
      if (this.type === 'number' && this.isMobile) {
        return 'tel' // 数字键盘更易用
      }
      
      // 移动端日期类型特殊处理
      if (this.type === 'date' && this.isMobile) {
        // iOS中保持原生的date类型，其他可能考虑替换为更好的UI方案
        return 'date'
      }
      
      return this.type
    }
  },
  methods: {
    onInput(event) {
      this.$emit('update:modelValue', event.target.value)
      this.$emit('input', event.target.value)
    },
    onBlur(event) {
      this.isFocused = false
      this.$emit('blur', event.target.value)
    },
    onFocus(event) {
      this.isFocused = true
      this.$emit('focus', event.target.value)
    },
    onClear() {
      this.$emit('update:modelValue', '')
      this.$emit('clear')
    }
  }
}
</script>

<style scoped>
.form-field {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.required-mark {
  color: var(--error);
  margin-left: 4px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.form-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--divider);
  border-radius: 4px;
  font-size: 14px;
  color: var(--text-primary);
  background-color: var(--background-white);
  transition: all 0.3s;
}

.form-input:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
  outline: none;
}

.form-input:disabled, .form-input:read-only {
  background-color: var(--background-grey);
  cursor: not-allowed;
  color: var(--text-disabled);
}

.clear-btn {
  position: absolute;
  right: 12px;
  color: var(--text-disabled);
  cursor: pointer;
  font-size: 14px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-suffix {
  position: absolute;
  right: 12px;
  color: var(--text-secondary);
}

.error-message {
  font-size: 12px;
  color: var(--error);
  margin-top: 4px;
}

.hint-message {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.has-error .form-input {
  border-color: var(--error);
}

.has-error .form-input:focus {
  box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2);
}

/* 移动端优化样式 */
.is-mobile .form-input {
  height: var(--touch-target-size);
  font-size: 16px; /* 防止iOS缩放 */
  padding: 0 16px;
  border-radius: var(--border-radius-md);
}

.is-mobile .form-label {
  font-size: var(--font-size-sm);
  margin-bottom: 10px;
}

.is-mobile .clear-btn {
  width: 24px;
  height: 24px;
  right: 10px;
}

.is-mobile .error-message,
.is-mobile .hint-message {
  font-size: var(--font-size-xs);
  margin-top: 6px;
}

/* 触摸状态优化 */
@media (hover: none) {
  .clear-btn {
    opacity: 0.7;
  }
  
  .clear-btn:active {
    opacity: 1;
    transform: scale(1.1);
  }
}
</style> 